<template>
  <div class="EnvirDetail">
  	<div class="EnvirDetail_content">
  		<TabBlue :tabs="['查询条件']" :activeTab.sync="activeTab">
  		    <div slot="TabColContent" class="TabColContent">
  		        <div class="filterItem">
  		            <div class="title"><i></i><span class="text">设备编号</span></div>
  		            <div class="content">
  		                <el-input placeholder="请输入内容" v-model="keyId" class="input-with-select">
  		                </el-input>
  		            </div>
  		        </div>
  		        <div class="filterItem">
  		            <div class="title"><i></i><span class="text">名称</span></div>
  		            <div class="content">
  		                <el-input placeholder="请输入内容" v-model="keyName" class="input-with-select">
  		                </el-input>
  		            </div>
  		        </div>
  		        <el-button type="primary" @click="export2Excel">导出报表</el-button>
  		    </div>
  		</TabBlue>
  		<TabBlue :tabs="['实时数据']" :activeTab.sync="activeTab">
  			<div slot="TabColContent" class="TabColContent">
  				<el-collapse v-model="activeNames1" @change="handleChange">
  				    <el-collapse-item title="设备列表" name="1">
  				        <div>
  				            <el-table :data="tableData1" style="width: 100%" :max-height="520" :header-cell-style="{background:'#F3F4F7'}">
  				                <el-table-column type="index" label="序号" align="center"></el-table-column>
  				                <el-table-column prop="id" label="设备编号" align="center"></el-table-column>
  				                <el-table-column prop="name" label="名称" align="center"></el-table-column>
  				                <el-table-column prop="state" label="状态" align="center"></el-table-column>
  				                <el-table-column prop="temp" label="温度" align="center"></el-table-column>
  				                <el-table-column prop="Wet" label="湿度" align="center"></el-table-column>
  				                <el-table-column prop="Atmos" label="大气压" align="center"></el-table-column>
  				                <el-table-column prop="PM" label="PM2.5" align="center"></el-table-column>
  				                <el-table-column prop="wSpeed" label="风速" align="center"></el-table-column>
  				                <el-table-column prop="wDir" label="风向" align="center"></el-table-column>
  				                <el-table-column prop="noise" label="噪声" align="center"></el-table-column>
  				                <!-- <el-table-column label="操作" align="center">
  				                    <el-button type="success" plain>查看</el-button>
  				                </el-table-column> -->
  				            </el-table>
  				        </div>
  				    </el-collapse-item>
  				</el-collapse>
  			</div>
  		</TabBlue>
  	</div>
  </div>
</template>
<script>
	import TabBlue from '../../components/TabBlue.vue'
	export default {
		components: {
			TabBlue,
		},
		data() {
			return {
				activeTab: '1',
				activeNames1: '1',

				keyId: 'HJ1080',
				keyName: 'aaa',
				
				tableData1: [
					{id: 'HJ1080',name: 'aaa',state: 'bbb',temp: 'ccc',Wet: 'ddd',Atmos: 'eee',PM: 'fff',wSpeed: 'ggg',wDir: 'hhh',noise: 'iii'},
					{id: 'HJ1081',name: 'aaa',state: 'bbb',temp: 'ccc',Wet: 'ddd',Atmos: 'eee',PM: 'fff',wSpeed: 'ggg',wDir: 'hhh',noise: 'iii'},
					{id: 'HJ1082',name: 'aaa',state: 'bbb',temp: 'ccc',Wet: 'ddd',Atmos: 'eee',PM: 'fff',wSpeed: 'ggg',wDir: 'hhh',noise: 'iii'},
					{id: 'HJ1083',name: 'aaa',state: 'bbb',temp: 'ccc',Wet: 'ddd',Atmos: 'eee',PM: 'fff',wSpeed: 'ggg',wDir: 'hhh',noise: 'iii'},
					{id: 'HJ1084',name: 'aaa',state: 'bbb',temp: 'ccc',Wet: 'ddd',Atmos: 'eee',PM: 'fff',wSpeed: 'ggg',wDir: 'hhh',noise: 'iii'},
					{id: 'HJ1085',name: 'aaa',state: 'bbb',temp: 'ccc',Wet: 'ddd',Atmos: 'eee',PM: 'fff',wSpeed: 'ggg',wDir: 'hhh',noise: 'iii'},
					{id: 'HJ1086',name: 'aaa',state: 'bbb',temp: 'ccc',Wet: 'ddd',Atmos: 'eee',PM: 'fff',wSpeed: 'ggg',wDir: 'hhh',noise: 'iii'},
					{id: 'HJ1087',name: 'aaa',state: 'bbb',temp: 'ccc',Wet: 'ddd',Atmos: 'eee',PM: 'fff',wSpeed: 'ggg',wDir: 'hhh',noise: 'iii'},
					{id: 'HJ1088',name: 'aaa',state: 'bbb',temp: 'ccc',Wet: 'ddd',Atmos: 'eee',PM: 'fff',wSpeed: 'ggg',wDir: 'hhh',noise: 'iii'},
					{id: 'HJ1089',name: 'aaa',state: 'bbb',temp: 'ccc',Wet: 'ddd',Atmos: 'eee',PM: 'fff',wSpeed: 'ggg',wDir: 'hhh',noise: 'iii'},
					{id: 'HJ1090',name: 'aaa',state: 'bbb',temp: 'ccc',Wet: 'ddd',Atmos: 'eee',PM: 'fff',wSpeed: 'ggg',wDir: 'hhh',noise: 'iii'},
					{id: 'HJ1091',name: 'aaa',state: 'bbb',temp: 'ccc',Wet: 'ddd',Atmos: 'eee',PM: 'fff',wSpeed: 'ggg',wDir: 'hhh',noise: 'iii'},
					{id: 'HJ1092',name: 'aaa',state: 'bbb',temp: 'ccc',Wet: 'ddd',Atmos: 'eee',PM: 'fff',wSpeed: 'ggg',wDir: 'hhh',noise: 'iii'},
					{id: 'HJ1093',name: 'aaa',state: 'bbb',temp: 'ccc',Wet: 'ddd',Atmos: 'eee',PM: 'fff',wSpeed: 'ggg',wDir: 'hhh',noise: 'iii'},
					{id: 'HJ1094',name: 'aaa',state: 'bbb',temp: 'ccc',Wet: 'ddd',Atmos: 'eee',PM: 'fff',wSpeed: 'ggg',wDir: 'hhh',noise: 'iii'},
					{id: 'HJ1095',name: 'aaa',state: 'bbb',temp: 'ccc',Wet: 'ddd',Atmos: 'eee',PM: 'fff',wSpeed: 'ggg',wDir: 'hhh',noise: 'iii'}
				],
			}
		},
		computed: {
		},
		methods: {
			handleChange(){

			},
			formatJson(filterVal, jsonData) {
			    return jsonData.map(v => filterVal.map(j => v[j]))
			},
			export2Excel() {
			    require.ensure([], () => {
			        const { export_json_to_excel } = require('@/vendor/Export2Excel')
			        const tHeader = ['设备编号','名称','状态','温度','湿度','大气压','PM2.5','风速','风向','噪声']
			        let filterVal = []
			        for(let k in this.tableData1[0]) {
			        	filterVal.push(k)
			        }
			        const list = this.tableData1
			        const data = this.formatJson(filterVal, list)
			        export_json_to_excel(tHeader, data, '商品管理列表')
			    })
			}
		}
	}
</script>
<style>
	.EnvirDetail {
		background-color: #E9EEF3;
		width: 100%;
		height: 100%;
	}
	.EnvirDetail_content {
		padding: 10px 20px;
	}
	.EnvirDetail_content .el-collapse .el-collapse-item {
	    background-color: #fff;
	    margin-bottom: 10px;
	    padding-left: 10px;
	    padding-right: 10px;
	    border: 1px solid #E9EEF3;
	    border-top: none;
	}
	.EnvirDetail_content .TabColContent .el-collapse {
	    border: none;
	}

	.EnvirDetail_content .TabColContent .el-collapse .el-collapse-item {
	    border: none;
	}
	.EnvirDetail_content .el-collapse {
	    border: none;
	}

	.EnvirDetail_content .el-collapse .el-collapse-item .el-collapse-item__header {
	    color: #f88976;
	    font-size: 17px;
	}

	.EnvirDetail_content .el-collapse .el-collapse-item .el-collapse-item__wrap {
	    border: none;
	}
	.EnvirDetail_content .TabBlue {
	    margin-bottom: 20px;
	}
	.EnvirDetail_content .TabColContent {
	    background-color: #fff;
	    padding: 10px 20px;
	    border-radius: 3px;
	}
	.EnvirDetail_content .TabColContent .filterItem {
	    width: 25%;
	    display: inline-block;
	    margin-right: 20px;
	}

	.EnvirDetail_content .TabColContent .filterItem>.title {
	    height: 30px;
	    line-height: 30px;
	    vertical-align: middle;
	    margin-bottom: 10px;
	}

	.EnvirDetail_content .TabColContent .filterItem>.title:after {
	    content: '';
	    height: 100%;
	    display: inline-block;
	    vertical-align: middle;
	}

	.EnvirDetail_content .TabColContent .filterItem>.title i {
	    display: inline-block;
	    background: rgba(42, 88, 173, .9);
	    width: 3px;
	    height: 16px;
	    vertical-align: middle;
	    margin-right: 10px;
	}

	.EnvirDetail_content .TabColContent .filterItem>.title .text {
	    display: inline-block;
	    vertical-align: middle;
	}

	.EnvirDetail_content .TabColContent .filterItem:last-child {
	    margin-right: 0;
	}
</style>